<template>
  <el-drawer v-model="state.drawerVisible" direction="rtl" :before-close="close" :title="state.drawerTitle" size="1000">
    <el-form :model="form" ref="formRef" label-width="120px">
      <el-form-item prop="configName" label="配置名称">
        <el-input v-model="form.configName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item prop="configDesc" label="配置描述">
        <el-input v-model="form.configDesc" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item prop="configStatus" label="配置状态">
        <el-select v-model="form.configStatus" placeholder="请选择">
          <el-option label="启用" :value="1">启用</el-option>
          <el-option label="禁用" :value="0">禁用</el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="type" label="配置类型">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            :key="item.value"
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in state.configTypeList"
            >{{ item.label }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item prop="configYaml" label="配置内容(Yaml)">
        <CodemirrorYaml v-model="form.configYaml" style="width: 100%; height: calc(100vh - 430px); text-align: left" />
        <!-- <div
          ref="editorRef"
          class="code-box"
          contenteditable="true"
          v-my-html="form.configJson"
          @input="changeText"
          @focus="state.isChange = false"
          @blur="state.isChange - true"
        >
          {{ form.configJson }}
        </div> -->
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="btns">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :loading="state.submitting" @click="handleOk">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { postPayConfigSave, postPayConfigUpdate, postPayConfigGetById } from '@/api/shop'
import CodemirrorYaml from './CodemirrorYaml.vue'

const state = reactive({
  drawerVisible: false,
  drawerTitle: '新增',
  submitting: false,
  configTypeList: [
    {
      value: 'wx',
      label: '微信'
    },
    {
      value: 'xcx',
      label: '小程序'
    },
    {
      value: 'zfb',
      label: '支付宝'
    }
  ]
})

const emits = defineEmits(['close', 'ok'])

const formRef = ref(null)
const form = reactive({
  id: '',
  configName: '',
  configDesc: '',
  configStatus: 0,
  // configType: '',
  type: '',
  configYaml: ''
})

function close() {
  state.drawerVisible = false
  formRef.value.resetFields()
}

function show(data) {
  state.drawerVisible = true
  state.drawerTitle = data?.id ? '编辑' : '新增'
  if (data?.id) {
    postPayConfigGetById({ id: data?.id }).then((res) => {
      console.log(res, 'res config pay')
      form.id = res.data.id
      form.configName = res.data.configName
      form.configDesc = res.data.configDesc
      form.configStatus = +res.data.configStatus
      // form.configType = res.data.configType
      form.type = res.data.type
      form.payConfigId = res.data.payConfigId
      form.configYaml = res.data.configYaml
    })
  } else {
    form.id = undefined
  }
}

function handleOk() {
  state.submitting = true
  const api = form.id ? postPayConfigUpdate : postPayConfigSave
  api({ ...form })
    .then((res) => {
      if (res.code === '') {
        ElMessage.success(form.id ? '修改成功' : '新增成功')
        close()
        emits('ok')
      }
    })
    .finally(() => {
      state.submitting = false
    })
}

const editorRef = ref(null)

defineExpose({
  show
})
</script>

<style>
.code-box {
  width: 100%;
  height: 300px;
}
</style>
